.H HTML 1
.
.H "Best Practices"
.BL
Screen readers allow for navigation using headings.
(
.CW <h1> ,
.CW <h2> ,
etc)
So put them in a logical order.
If you want larger text,
style the headings using CSS.
.BL
Use the
.CW <figure>
and the
.CW <figcaption>
elements to properly describe the figure caption to screen readers users.
.CBS HTML \f[CW]figure\f[] and \f[CW]figcaption\f[] example.
<figure>
	<img src="./flower.webp"/>
	<figcaption>A red flower I once saw</figcaption>
</figure>
.CBE
Note that when using
.CW <figcaption>
we can safely omit the
.CW alt
property nomarly used to provide an description to visual only elements.
.BL
Have links actually describe where they are going.
.CBS HTML descriptive links example.
<!-- Good -->
Find wood at <a href="https//wood.com">wood.com</a>
<!-- Bad -->
If you into wood go here <a href="https//wood.com">wood.com</a>
.CBE
.BL
Avoid the
.CW <abbr>
it holds little utility,
especially since is meant to be used with
the also useless
.CW title
property,
which is poorly supported by screen readers
and holds little value for other users.
.BL
Properly landmark your page using the
.CW <header> ,
.CW <article> ,
.CW <main> ,
.CW <aside> ,
and
.CW <footer>
elements.
.BL
The
.CW <header>
element is used to denote introductory
or miscellaneous information.
It can be used to indicate the top part of the page containing a menu,
the logo you're using,
author's name and credentials, etc.
Further, a
.CW <header>
is only associated with nearest sectioning elements,
so feel free to repeat them again inside the
.CW <section>
or the
.CW <article>
elements.
.BL
The 
.CW <footer>
element carries similar semantic weight as the header,
but for information that goes at the end of document.
It is also associated with the nearest sectioning element.
.BL
The 
.CW <aside>
element,
when inside an
.CW <article>
element, is commonly used to for information tangential to text
(definitions,
hightlights,
etc).
When used outside,
howhever,
you can treat as a
.CW <footer>
or
.CW <header>
element,
in the sense that they are "other" parts of the page.
A common pattern,
is using the
.CW <aside>
as a container for a sidebar.
.BL
Avoid
.CW aria-controls .
It's not many screen readers support it
and those that do,
do it poorly.
This is because:
.RS
.IP - 2
There could be a lot interactive
and focusable markup between the
.I aria
elements,
making moving the elements clumsy.
.IP - 2
There is no clear way to
.B "move back"
to where you were.
.RE
Is better to use landmarks,
same-page links instead
and areas that come immediately after their
.CW aria-expanded .
.BL
Use
.I aria
properties only when they are needed,
that is,
when the a given
.I HTML
element is not acessible enough.
But always prefer the usage of
.B semantic
.BI HTML
first.
.CBS Poor HTML practice with \f[I]aria\f[] example.
<!--This is a poor, albeit common, replacement for a h1 element-->
<div class="h1-mimic" role="heading" aria-level="1">
</div>
.CBE
.I Aria
properties can be useful to
.B extend
behaviour of elements.
Here is an example with a toggle button.
.CBS Useful application of an \f[I]aria\f[] attribute.
<!--You would then use javascript to change the property to "true">
<button aria-pressed="false"></button>
.CBE
.BL
What follows is a distinction between the often confused tags
.CW <strong> ,
.CW <b> ,
.CW <em> and
.CW <i> .
.RS
.
.IP - 2
Use the
.CW <strong>
element to denote urgency,
importance or seriousness.
.IP - 2
The
.CW <b>
element is simply for text you want to draw attention to,
but is not necessarily important,
only merely prevailent.
.IP - 2
Use the
.CW <em>
element for text that should be emphasized,
that is,
text would probably call for a tone change when actually spoken.
.IP - 2
The
.CW <i>
element is simply used for text that stands out in relation to the surrounding
text,
like scientific names,
thoughts,
technical terms
and idiomatic terms from other languages.
.
.RE
.BL
Demark elements used for navigation using the
.CW <nav>
element.
.CBS HTML \f[CW]<nav>\f[] element usage example.
<nav aria-label="section navigation">
	<ul class="menu">
		<li><a href="#">News</a></li>
		<li><a href="#">Politics</a></li>
		<li><a href="#">World</a></li>
		<li><a href="#">Sport</a></li>
		<li><a href="#">Tech</a></li>
	</ul>
</nav>
.CBE
Is also useful to the elements inside lists,
since some screen readers will read out the number of items.
Also, the
.CW aria-label
property can be used to better identify the menu
and will be read by some screen readers.
.BL
Use the
.CW <section>
whenever you need to put a part of your document inside a container.
Think of it as more semantic alternative to a simple
.CW <div>
element.
Theoretically,
you could also have headings that are independent from the rest of the document
when inside a
.CW <section>
element.
But since screen readers don't properly support this feature,
use it merely as a
.CW <div>
alternative.
.BL
.B "Never use tables for layout."
This is a relic technique from the past,
when a front end developer had no other option,
but using it now only hampers the accesibility of your document.
.BL
Use the
.CW <main>
element as a container to the most important part of the document.
That would be the content that most likely caused a user to navigate to the page
in the first place.
This element can only appear once in the whole document.
